<template>
	<div class="min-h-screen bg-gray-50 flex flex-col">
		<!-- 顶部导航 -->
		<nav class="h-24 bg-white shadow-sm fixed w-full z-50 flex items-center justify-between px-8">
			<div class="flex items-center gap-8">
				<!-- 系统Logo -->
				<div class="flex items-center gap-4 bg-slate-800 px-5 py-3 rounded-lg">
					<div class="logo-icon w-12 h-12">
						<svg viewBox="0 0 100 100" fill="none">
							<circle cx="50" cy="50" r="45" stroke="url(#gradient1)" stroke-width="3" fill="none" />
							<circle cx="50" cy="50" r="35" stroke="url(#gradient2)" stroke-width="2" fill="none" />
							<path d="M30 40 L50 30 L70 40 L70 60 L50 70 L30 60 Z" fill="url(#gradient3)"
								opacity="0.8" />
							<circle cx="50" cy="50" r="8" fill="white" />
							<defs>
								<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
									<stop offset="0%" style="stop-color:#4A90E2" />
									<stop offset="100%" style="stop-color:#7BB3F0" />
								</linearGradient>
								<linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%">
									<stop offset="0%" style="stop-color:#5BA0F2" />
									<stop offset="100%" style="stop-color:#8CC8FF" />
								</linearGradient>
								<linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="100%">
									<stop offset="0%" style="stop-color:#4A90E2" />
									<stop offset="100%" style="stop-color:#6BB0FF" />
								</linearGradient>
							</defs>
						</svg>
					</div>
					<div class="flex flex-col">
						<span class="text-xl font-bold text-blue-600">
							EduLiveLink管理系统
						</span>
						<span class="text-xs text-black">
							智能教育平台
						</span>
					</div>
				</div>
			</div>
			<div class="flex items-center gap-4">
				<button
					class="bg-blue-600 text-white px-6 py-2 rounded-md font-medium hover:bg-blue-700 transition-colors"
					@click="goHome">返回首页</button>
			</div>
		</nav>

		<!-- 上方空白区域 -->
		<div class="h-24 bg-white"></div>

		<!-- 主要内容区域 -->
		<div class="flex flex-1">
			<!-- 侧边栏 -->
			<aside class="w-64 bg-white shadow-sm border-r border-gray-200 fixed h-[calc(100vh-6rem)] z-40">
				<div class="p-6">
					<h2 class="text-lg font-semibold text-gray-900 mb-6">控制台导航</h2>
					<ul class="space-y-1">
						<li>
							<router-link to="/console"
								class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors"
								:class="currentPath === '/console' ? 'bg-blue-50 text-blue-600' : 'text-gray-700'">
								<span class="w-5 h-5 flex items-center justify-center">
									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2">
										<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
										<polyline points="9 22 9 12 15 12 15 22"></polyline>
									</svg>
								</span>
								<span>控制台首页</span>
							</router-link>
						</li>
						<li>
							<router-link to="/console/usermanagement"
								class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors"
								:class="currentPath.startsWith('/console/usermanagement') ? 'bg-blue-50 text-blue-600' : 'text-gray-700'">
								<span class="w-5 h-5 flex items-center justify-center">
									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2">
										<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
										<circle cx="8.5" cy="7" r="4"></circle>
										<line x1="20" y1="8" x2="20" y2="14"></line>
										<line x1="23" y1="11" x2="17" y2="11"></line>
									</svg>
								</span>
								<span>用户管理</span>
							</router-link>
						</li>
						<li>
							<router-link to="/console/classmanagement"
								class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors"
								:class="currentPath.startsWith('/console/classmanagement') ? 'bg-blue-50 text-blue-600' : 'text-gray-700'">
								<span class="w-5 h-5 flex items-center justify-center">
									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2">
										<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
										<polyline points="9 22 9 12 15 12 15 22"></polyline>
									</svg>
								</span>
								<span>班级管理</span>
							</router-link>
						</li>
						<li>
						  <router-link to="/console/coursemanagement"
						    class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors"
						    :class="currentPath.startsWith('/console/coursemanagement') ? 'bg-blue-50 text-blue-600' : 'text-gray-700'">
						    <span class="w-5 h-5 flex items-center justify-center">
						      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
						        <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
						        <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
						      </svg>
						    </span>
						    <span>课程管理</span>
						  </router-link>
						</li>
						<li>
							<router-link to="/console/resources"
								class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors"
								:class="currentPath.startsWith('/console/resources') ? 'bg-blue-50 text-blue-600' : 'text-gray-700'">
								<span class="w-5 h-5 flex items-center justify-center">
									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2">
										<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
										<polyline points="14 2 14 8 20 8"></polyline>
										<line x1="16" y1="13" x2="8" y2="13"></line>
										<line x1="16" y1="17" x2="8" y2="17"></line>
										<polyline points="10 9 9 9 8 9"></polyline>
									</svg>
								</span>
								<span>资源管理</span>
							</router-link>
						</li>
						<li>
							<router-link to="/console/settings"
								class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors"
								:class="currentPath.startsWith('/console/settings') ? 'bg-blue-50 text-blue-600' : 'text-gray-700'">
								<span class="w-5 h-5 flex items-center justify-center">
									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2">
										<circle cx="12" cy="12" r="3"></circle>
										<path
											d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
										</path>
									</svg>
								</span>
								<span>系统设置</span>
							</router-link>
						</li>
					</ul>
				</div>
			</aside>

			<!-- 主内容区 -->
			<main class="flex-1 ml-64 p-8">
				<div class="mb-8">
					<h1 class="text-3xl font-bold text-gray-900 mb-2">
						系统设置
					</h1>
					<p class="text-gray-600">
						管理平台系统参数设置，包括基础设置、安全设置等
					</p>
				</div>

				<!-- 设置列表表格 -->
				<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden mb-6">
					<div class="overflow-x-auto">
						<table class="w-full">
							<thead class="bg-gray-50">
								<tr>
									<th class="px-6 py-4 text-left text-sm font-medium text-gray-900">设置ID</th>
									<th class="px-6 py-4 text-left text-sm font-medium text-gray-900">设置名称</th>
									<th class="px-6 py-4 text-left text-sm font-medium text-gray-900">设置类别</th>
									<th class="px-6 py-4 text-left text-sm font-medium text-gray-900">当前值</th>
									<th class="px-6 py-4 text-left text-sm font-medium text-gray-900">最后修改人</th>
									<th class="px-6 py-4 text-left text-sm font-medium text-gray-900">最后修改时间</th>
									<th class="px-6 py-4 text-left text-sm font-medium text-gray-900">操作</th>
								</tr>
							</thead>
							<tbody class="divide-y divide-gray-200">
								<tr v-for="setting in settingsList" :key="setting.id" class="hover:bg-gray-50">
									<td class="px-6 py-4 text-sm text-gray-900">{{ setting.id }}</td>
									<td class="px-6 py-4 text-sm text-gray-900">{{ setting.name }}</td>
									<td class="px-6 py-4 text-sm text-gray-900">{{ setting.category }}</td>
									<td class="px-6 py-4 text-sm text-gray-900">{{ setting.value }}</td>
									<td class="px-6 py-4 text-sm text-gray-900">{{ setting.modifier }}</td>
									<td class="px-6 py-4 text-sm text-gray-900">{{ setting.modifyTime }}</td>
									<td class="px-6 py-4 text-sm">
										<button @click="editSetting(setting)"
											class="text-blue-600 hover:text-blue-800">编辑</button>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<!-- 分页 -->
					<div class="px-6 py-4 border-t border-gray-200 flex justify-between items-center">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="currentPage" :page-sizes="[5, 10, 20]" :page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper" :total="totalSettings">
						</el-pagination>
					</div>
				</div>

				<!-- 编辑设置对话框 -->
				<el-dialog v-model="showEditDialog" title="编辑系统设置" width="500px">
					<el-form :model="form" label-width="80px">
						<el-form-item label="设置ID" disabled>
							<el-input v-model="form.id" />
						</el-form-item>
						<el-form-item label="设置名称" disabled>
							<el-input v-model="form.name" />
						</el-form-item>
						<el-form-item label="设置类别" disabled>
							<el-input v-model="form.category" />
						</el-form-item>
						<el-form-item label="设置值">
							<el-input v-model="form.value"
								:type="form.id === 'passwordExpireDays' ? 'number' : 'text'" />
						</el-form-item>
					</el-form>
					<template #footer>
						<el-button @click="showEditDialog = false">取消</el-button>
						<el-button type="primary" @click="saveSetting">保存</el-button>
					</template>
				</el-dialog>
			</main>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	import {
		ElMessage
	} from 'element-plus'

	const router = useRouter()
	const route = useRoute()

	// 当前路径
	const currentPath = ref(route.path)

	// 分页参数
	const currentPage = ref(1)
	const pageSize = ref(10)
	const totalSettings = ref(0)

	// 设置列表数据
	const settingsList = ref([{
			id: 'siteName',
			name: '系统名称',
			category: '基础设置',
			value: 'EduLiveLink管理系统',
			modifier: 'admin',
			modifyTime: '2023-08-15 10:30:00'
		},
		{
			id: 'pageSize',
			name: '默认分页大小',
			category: '基础设置',
			value: '10',
			modifier: 'admin',
			modifyTime: '2023-08-15 10:32:00'
		},
		{
			id: 'passwordExpireDays',
			name: '密码过期天数',
			category: '安全设置',
			value: '90',
			modifier: 'admin',
			modifyTime: '2023-08-16 14:20:00'
		},
		{
			id: 'loginFailedLimit',
			name: '登录失败限制次数',
			category: '安全设置',
			value: '5',
			modifier: 'admin',
			modifyTime: '2023-08-16 14:25:00'
		},
		{
			id: 'resourceMaxSize',
			name: '资源最大上传大小',
			category: '资源设置',
			value: '1024MB',
			modifier: 'admin',
			modifyTime: '2023-08-17 09:40:00'
		}
	])

	// 对话框状态
	const showEditDialog = ref(false)

	// 表单数据
	const form = reactive({
		id: '',
		name: '',
		category: '',
		value: '',
		modifier: '',
		modifyTime: ''
	})

	// 初始化
	onMounted(() => {
		totalSettings.value = settingsList.value.length
	})

	// 分页事件
	const handleSizeChange = (val) => {
		pageSize.value = val
	}

	const handleCurrentChange = (val) => {
		currentPage.value = val
	}

	// 编辑设置
	const editSetting = (setting) => {
		// 复制设置数据到表单
		Object.assign(form, {
			...setting
		})
		showEditDialog.value = true
	}

	// 保存设置
	const saveSetting = () => {
		// 实际项目中这里会调用API保存数据
		const index = settingsList.value.findIndex(s => s.id === form.id)
		if (index !== -1) {
			// 更新修改人和修改时间
			const updatedSetting = {
				...settingsList.value[index],
				...form,
				modifier: 'admin', // 实际应从当前登录用户获取
				modifyTime: new Date().toLocaleString()
			}
			settingsList.value[index] = updatedSetting
		}
		showEditDialog.value = false
		ElMessage.success('设置保存成功')
	}

	// 返回首页
	const goHome = () => {
		router.push('/')
	}
</script>

<style scoped>
	/* 可以根据需要添加自定义样式 */
</style>